<template>
  <van-tabbar v-model="active" :placeholder="true" :route="true" fixed>
    <van-tabbar-item replace v-for="(item, index) in tabbarData" :key="index" :icon="item.icon" :to="item.to">
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
const { t } = useI18n();
const active = ref(0);
const tabbarData = reactive([
  {
    icon: "wap-home",
    title: computed(() => t("home.tabbar.home")),
    to: {
      name: "home"
    }
  },
  {
    icon: "todo-list",
    title: computed(() => t("home.tabbar.tools")),
    to: {
      name: "tools"
    }
  },
  {
    icon: "user",
    title: computed(() => t("home.tabbar.about")),
    to: {
      name: "about"
    }
  }
]);
</script>
<style lang="scss" scoped>
@keyframes van-tabbar-item-active {
  20% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

:deep(.van-tabbar) {
  .van-tabbar-item--active {
    .van-icon {
      animation: van-tabbar-item-active 0.3s ease-in-out;
    }
  }
}
</style>